<template>
    <div class="login-container">
        <el-card :body-style="{ padding: '0px' }" style="margin-left: 20%;width: 60%" shadow="always">
            <el-container>
                <el-aside width="540px">
                    <div>
                        <img src="../assets/login.jpg" style="width: 100%;display: block">
                    </div>
                </el-aside>
                <el-main>
                    <div id="login" :class="{'middle-flip':isChoose}">
                        <div id="loginForm" class="front">
                            <el-row>
                                <el-col :span="12">
                                    <span>Welcome</span>
                                </el-col>
                                <el-col :span="12" align="right">
                                    <el-link type="primary" @click="togglePay" >没有账号？去注册</el-link>
                                </el-col>
                            </el-row>
                            <div style="margin-top: 5%;">
                                <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="top" >
                                    <el-form-item label="用户名" class="boldItem" prop="nickname">
                                        <el-col :span="24">
                                            <el-input v-model="loginForm.nickname" ></el-input>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="密码" class="boldItem" prop="password">
                                        <el-col :span="24">
                                            <el-input type="password" v-model="loginForm.password"></el-input>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item >
                                        <el-col :span="24" align="right">
                                            <el-link type="primary">忘记密码？</el-link>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item >
                                        <el-col :span="24">
                                            <el-button type="primary" icon="el-icon-login" @click="submitLoginForm('loginForm')" style="width: 100%">登录</el-button>
                                        </el-col>
                                    </el-form-item>
                                </el-form>
                               <!-- <el-divider>第三方登录</el-divider>-->
                                <!--<el-row style="margin-left: 18%">
                                    <el-col :span="8">
                                        <svg class="icon" aria-hidden="true" font-size="36px">
                                            <use xlink:href="#ali-icon-QQ"></use>
                                        </svg>
                                    </el-col>
                                    <el-col :span="8">
                                        <svg class="icon" aria-hidden="true" font-size="36px">
                                            <use xlink:href="#ali-icon-weixin"></use>
                                        </svg>
                                    </el-col>
                                    <el-col :span="8">
                                        <svg class="icon" aria-hidden="true" font-size="36px">
                                            <use xlink:href="#ali-icon-weibo"></use>
                                        </svg>
                                    </el-col>
                                </el-row>-->
                            </div>
                        </div>

                        <div id="regForm" class="back">
                            <el-row>
                                <el-col :span="12">
                                    <span>Sign Up</span>
                                </el-col>
                                <el-col :span="12" align="right">
                                    <el-link id="regBtn" type="primary" @click="togglePay">已有账号?去登录</el-link>
                                </el-col>
                            </el-row>
                            <div style="margin-top: 5%">
                                <el-form ref="regForm" :model="regForm" status-icon :rules="regRules" label-position="top" >
                                    <el-form-item prop="nickname">
                                        <el-input prefix-icon="el-icon-user-solid" placeholder="请输入用户名" v-model="regForm.nickname"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="email">
                                        <el-input placeholder="请输入邮箱" v-model="regForm.email">
                                            <i slot="prefix" >
                                                <svg class="icon" aria-hidden="true" font-size="15px" style="margin-left: 30%;font-weight: bold">
                                                    <use xlink:href="#ali-icon-youxiang2"></use>
                                                </svg>
                                            </i>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item prop="telephone">
                                        <el-input placeholder="请输入手机号" v-model="regForm.telephone">
                                            <i slot="prefix" >
                                                <svg class="icon" aria-hidden="true" font-size="20px">
                                                    <use xlink:href="#ali-icon-shouji1"></use>
                                                </svg>
                                            </i>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item prop="username">
                                        <el-input placeholder="请输入姓名" v-model="regForm.username">
                                            <i slot="prefix" >
                                                <svg class="icon" aria-hidden="true" font-size="18px">
                                                    <use xlink:href="#ali-icon-zuoxixingming"></use>
                                                </svg>
                                            </i>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item prop="password">
                                        <el-input type="password" placeholder="请输入密码" v-model="regForm.password">
                                            <i slot="prefix" >
                                                <svg class="icon" aria-hidden="true" font-size="18px">
                                                    <use xlink:href="#ali-icon-mima2"></use>
                                                </svg>
                                            </i>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item prop="rePassword">
                                        <el-input type="password" placeholder="请确认密码" v-model="regForm.rePassword">
                                            <i slot="prefix" >
                                                <svg class="icon" aria-hidden="true" font-size="18px">
                                                    <use xlink:href="#ali-icon-mima"></use>
                                                </svg>
                                            </i>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item >
                                        <el-col :span="24" align="center">
                                            <el-button type="primary" icon="el-icon-login" @click="submitRegForm('regForm')" style="width: 50%;" round>确认注册</el-button>
                                        </el-col>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {

            var passValidator = (rule,value,callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.regForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };

            return {
                loginForm: {
                    nickname: '',
                    password: ''
                },
                isChoose:false,
                loginRules:{
                    nickname: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 2,max: 14,message: '长度在 2 到 14 个字符'}
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 5,max: 25,message: '长度在 5 到 25个字符'},
                        { pattern: /^(\w){5,25}$/, message: '只能输入5-25个字母、数字、下划线'}
                    ]
                },
                regForm:{
                    username:'',
                    password:'',
                    rePassword:'',
                    email:'',
                    telephone:'',
                    nickname:''
                },
                regRules:{
                    username: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { pattern : /^[\u4e00-\u9fa5]+[A-Za-z\u4e00-\u9fa5]+$/,message: '请输入正确格式的姓名'}
                    ],

                    telephone: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号'}
                    ],
                    email: [
                        { required: true, message: '请输入邮箱', trigger: 'blur' },
                        { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确格式的邮箱'}
                    ],
                    nickname: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 2,max: 14,message: '长度在 2 到 14 个字符'}
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 5,max: 25,message: '长度在 5 到 25个字符'},
                        { pattern: /^(\w){5,25}$/, message: '只能输入5-25个字母、数字、下划线'}
                    ],
                    rePassword: [
                        { validator: passValidator,trigger: 'change'}
                    ]
                }
            }
        },
        methods: {
            togglePay:function(){
                this.isChoose = !this.isChoose
            },

            submitLoginForm(formName) {
                const _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('http://127.0.0.1:8081/ICDManagement/user/login',this.loginForm).then(function (res) {
                            if(res.data.token != null){
                                localStorage.setItem('access-data',JSON.stringify(res.data))
                                _this.$router.push('/IcdManagement');
                                _this.$message({
                                    offset:80,
                                    message:'登录成功',
                                    type:'success'
                                });
                            }else {
                                _this.$message.error(res.data.message);
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            submitRegForm(formName) {
                const _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('http://127.0.0.1:8081/ICDManagement/user/signUp',this.regForm).then(function (res) {
                            if(res.data.ok){
                                document.querySelector("#regBtn").click();
                                _this.$refs[formName].resetFields();
                                _this.$notify({
                                    title: '成功',
                                    message: '注册成功',
                                    type: 'success',
                                    duration:2000
                                });
                            }else {
                                _this.$notify.error({
                                    title: '错误',
                                    message: res.data.message,
                                    duration:2000
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    }
</script>

<style scoped>
    .login-container {
        width: 1536px;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        background: #91cfde;

        /* 登录框上下对齐 */
        display: flex;
        align-items: center;
    }

    span {
        font-family: 'Times New Roman',serif;
        font-size: 36px;
        font-weight: bold;
        display: inline-block;
    }

    .el-aside {
        color: #333;
        text-align: center;
        line-height: 200px;
       /* margin-left: 25%;*/
    }

    .el-main {
        background-color: #FFFFFF;
        width: 180px;
        color: #333;
        text-align: left;
        line-height: 36px;
        /*margin-right: 25%;*/
    }
</style>

<style>
    .boldItem {
        font-weight: bold;
    }
</style>

<style type="text/css">
    .icon {
        width: 1em; height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }


    .front {
        transform: rotateY(0deg);
    }

    /* 将back旋转180度，背面朝向用户 */
    .back {
        transform: rotateY(-180deg);
    }

    .front,
    .back {
        width: 22%;
        position: absolute;
        /* 设置背面朝向用户时不可见 */
        backface-visibility: hidden;
        transition: 0.3s linear;
    }

    /* 将front旋转180度 */
    .middle-flip .front {
        transform: rotateY(180deg);
    }
    /* 将back旋转180度 */
    .middle-flip .back {
        transform: rotateY(0deg);
    }
</style>